<!--
 * @Description: 订单管理页
 * @Author: money
 * @Date: 2021-06-24 17:03:34
 * @LastEditors: Zlou
 * @LastEditTime: 2021-07-02 14:58:55
-->
<template>
  <div>
    <!-- 标签 -->
    <div class="card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="所有订单" name="所有订单"></el-tab-pane>
        <el-tab-pane label="待支付" name="待支付"></el-tab-pane>
        <el-tab-pane label="待派单" name="待派单"></el-tab-pane>
        <el-tab-pane label="待接单" name="待接单"></el-tab-pane>
        <el-tab-pane label="待服务" name="待服务"></el-tab-pane>
        <el-tab-pane label="待确认" name="待确认"></el-tab-pane>
        <el-tab-pane label="已完成" name="已完成"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 表格 -->
    <div>
      <el-table
        size="mini"
        :data="tableData"
        stripe
        v-loading="loading"
        style="width: 100%"
      >
        <el-table-column
          fixed
          prop="id"
          align="center"
          label="订单编号"
          width="120"
        >
        </el-table-column>
        <el-table-column align="center" label="下单时间">
          <template slot-scope="scope">
            {{ moment(scope.row.orderTime).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="总价">
          <template slot-scope="scope">
            ￥ <span class="red_info_money">{{ scope.row.total }}</span> 元
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '待派单'" type="success">{{
              scope.row.status
            }}</el-tag>
            <el-tag v-if="scope.row.status === '待接单'" type="warning">{{
              scope.row.status
            }}</el-tag>
            <el-tag
              v-if="
                scope.row.status === '待服务' || scope.row.status === '待支付'
              "
              type="danger"
              >{{ scope.row.status }}</el-tag
            >
            <el-tag
              v-if="
                scope.row.status === '待确认' || scope.row.status === '已完成'
              "
              type="info"
              >{{ scope.row.status }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="customerId" align="center" label="顾客ID">
        </el-table-column>
        <el-table-column
          v-if="activeName !== '待派单'"
          align="center"
          label="员工ID"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.employeeId === null">--</span>
            <span v-else>{{ scope.row.employeeId }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <templat slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-document"
              size="small"
              @click="toDetail(scope.row.id)"
              >详情</el-button
            >
            <el-button
              type="text"
              size="small"
              icon="el-icon-bicycle"
              @click="toSend(scope.row.id)"
              v-if="scope.row.status === '待派单'"
              class="blue_info"
              >派单</el-button
            >
            <el-button
              type="text"
              size="small"
              icon="el-icon-loading"
              @click="toCancle(scope.row.id)"
              v-else-if="scope.row.status === '待接单'"
              class="red_info"
              >取消派单</el-button
            >
          </templat>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination-div">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[2, 5, 10, 15, 20, 30]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 派单模态框 -->
    <el-dialog title="派单" :visible.sync="visible" :before-close="toClose">
      <el-form ref="form" size="mini">
        <el-form-item>
          <!-- {{ form }} -->
          <el-radio-group size="mini" v-model="form.waiterId">
            <el-radio :label="item.id" v-for="item in roleName" :key="item.id">
              {{ item.username }}{{ item.realname }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="dialog-footer">
          <el-button type="primary" size="small" @click="toConfirm"
            >确定</el-button
          >
          <el-button size="small" @click="toClose">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { pageQuery, sendOrder, cancelSendOrder } from "@/api/order";
import { pageQuery as pageQueryPro } from "@/api/user";
import moment from "moment";
export default {
  data() {
    return {
      // 设置激活标签页
      activeName: "所有订单",
      // 表格展示的数据
      tableData: [],
      // 分页参数
      params: {
        page: 1,
        pageSize: 10,
      },
      // 总条数
      total: 0,
      // 加载
      loading: false,
      // 模态框的显示与隐藏
      visible: false,
      // 派单模态框
      form: {
        waiterId: "",
        orderId: "",
      },
      roleName: [],
    };
  },
  watch: {
    // loading
    params: {
      handler() {
        this.queryData();
      },
      deep: true,
    },
  },
  computed: {},
  methods: {
    // 标签页切换
    async handleClick() {
      this.activeName;
      // 处理数据
      let temp = {
        ...this.params,
      };
      if (this.activeName !== "所有订单") {
        temp.status = this.activeName;
      }
      let res = await pageQuery(temp);
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
    // 获取产品数据
    async queryData() {
      this.loading = true;
      // 处理数据
      let temp = {
        ...this.params,
      };
      // 遍历对象
      for (let key in temp) {
        if (!temp[key]) {
          delete temp[key];
        }
      }
      let res = await pageQuery(temp);
      this.tableData = res.data.list;
      this.total = res.data.total;
      // 加载完毕
      this.loading = false;
    },
    // 每页显示的条数发生变化时的事件处理程序
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      // this.params.pageSize = val;
      this.params = {
        page: 1,
        pageSize: val,
      };
    },
    // 当前页码发生变化时的时的事件处理程序
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.page = val;
    },
    // 时间格式化
    moment,
    // 跳转详情页
    async toDetail(id) {
      this.$router.push({
        path: "/admin/order/Details",
        //传参
        query: {
          index: id,
        },
      });
    },
    // 派单
    async toSend(id) {
      this.form.orderId = id;
      this.visible = true;
      let ro = {
        ...this.params,
        roleId: 1,
      };
      let res = await pageQueryPro(ro);
      this.roleName = res.data.list;
    },
    // 取消派单
    toCancle(id) {
      let temp = {
        orderId: id,
      };
      this.$confirm("是否取消派单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await cancelSendOrder(temp);
          this.handleClick();
          this.$message({
            type: "success",
            message: "取消派单成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消派单失败",
          });
        });
    },
    toConfirm({ form }) {
      let temp = {
        ...this.form,
      };
      this.$confirm("是否进行派单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await sendOrder(temp);
          this.visible = false;
          this.handleClick();
          this.$message({
            type: "success",
            message: "派单成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消派单",
          });
        });
    },
    // 关闭模态框
    toClose() {
      // 重置表单验证
      this.$refs.form.resetFields();
      //  超时调用
      setTimeout(() => {
        this.visible = false;
      }, 200);
    },
  },
  created() {
    this.queryData();
    this.handleClick();
  },
  mounted() {},
};
</script>
<style scoped>
.card{
  margin-left: 15px;
}
</style>